<template>
  <div>
    <el-dialog
      modal-append-to-body
      append-to-body
      lock-scroll
      fullscreen
      :title="title"
      :closeOnClickModal="false"
      :visible.sync="show"
      width="850px"
      >
      <el-form 
        label-position="right" 
        :model="selectTable"
        ref="addForm" 
        label-width="100px" 
        :inline="false"
        autocomplete="off"
        >
        <div class="box" style="margin-top: 0;">
          <div class="hr">基础信息</div>     
          <el-row>
          	<el-col :md="24">
  		        <el-form-item label="小程序名称" prop="appletName" :rules="[rule[0]]">
  		          <el-input placeholder="请输入" v-model="selectTable.appletName" maxLength="100"></el-input>
  		        </el-form-item>
          	</el-col>
            <el-col :md="12">
              <el-form-item label="小程序标题" prop="smallRoutine" :rules ="[rule[0]]">
                <el-input placeholder="请输入" v-model="selectTable.smallRoutine" maxLength="100"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label-width="150px" label="文章关联数量" prop="relationArticlesNumber" :rules ="[rule[0]]">
                <el-input-number v-model="selectTable.relationArticlesNumber" controls-position="right" style="width:120px" :min="0"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row>
            <el-col :md="12">
              <el-form-item label="状态" prop="status" :rules ="[rule[0]]">
                <el-switch
                  v-model="selectTable.status"
                  :active-value="0"
                  active-text="启用"
                  :inactive-value="1"
                  inactive-text="停用"
                  >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="到期时间" prop="expirationTime" :rules="[rule[0]]">
                <el-date-picker
                  style="width:200px"
                  value-format="timestamp"
                  v-model="selectTable.expirationTime"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          
  				<el-row>
          	<el-col :md="10">
  		        <el-form-item label="头像" prop="headUrl" :rules ="[rule[0]]">
  		          <singleImage v-model="selectTable.headUrl"></singleImage>
  		        </el-form-item>
  		      </el-col>
  		      <el-col :md="10">
              <el-form-item label="二维码" prop="qrCode" :rules ="[rule[0]]">
                <singleImage v-model="selectTable.qrCode"></singleImage>
              </el-form-item>
          	</el-col>
          </el-row>
        </div>
        
        <div class="box">
          <div class="hr">帐号</div> 
          <el-row>
            <el-col :md="16">
              <el-form-item label-width="180px" label="小程帐号"  prop="account" :rules ="[rule[0]]">
                <el-input placeholder="请输入" v-model="selectTable.account" maxLength="100"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="16">
              <el-form-item label-width="180px" label="小程序原始ID" prop="originalId" :rules ="[rule[0]]">
                <el-input placeholder="请输入" v-model="selectTable.originalId" maxLength="100"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        
        <div class="box">
          <div class="hr">开发者Id</div>        
          <el-row>
          	<el-col :md="16">
  		        <el-form-item label-width="180px" label="APPID" prop="appId" :rules ="[rule[0]]">
  		          <el-input placeholder="请输入" v-model="selectTable.appId" maxLength="100"></el-input>
  		        </el-form-item>
          	</el-col>
            <el-col :md="16">
              <el-form-item label-width="180px" label="AppSecret"  prop="appSecret" :rules ="[rule[0]]">
                <el-input placeholder="请输入" v-model="selectTable.appSecret" maxLength="100"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        
        <div class="box">
          <div class="hr">前往小程序配置的信息</div>
  				<el-row>
          	<el-col>
  		        <el-form-item label-width="180px" label="Request合法域名" prop="requestLegalDomain" :rules ="[rule[0]]">
  		          <el-input placeholder="请输入" v-model="selectTable.requestLegalDomain" maxLength="100" style="width: 70%;"></el-input>
  		          <el-button icon="el-icon-tickets" v-clipboard:copy='selectTable.requestLegalDomain' v-clipboard:success='clipboardSuccess'>复制</el-button>
  		        </el-form-item>
          	</el-col>
          	<el-col>
  		        <el-form-item label-width="180px" label="Socket合法域名" prop="scoketLegalDomain" :rules ="[rule[0]]">
  		          <el-input placeholder="请输入" v-model="selectTable.scoketLegalDomain" maxLength="100" style="width: 70%;"></el-input>
  		          <el-button icon="el-icon-tickets" v-clipboard:copy='selectTable.scoketLegalDomain' v-clipboard:success='clipboardSuccess'>复制</el-button>
  		        </el-form-item>
          	</el-col>
          	<el-col>
  		        <el-form-item label-width="180px" label="UploadFile合法域名" prop="uploadLegalDomain" :rules ="[rule[0]]">
  		          <el-input placeholder="请输入" v-model="selectTable.uploadLegalDomain" maxLength="100" style="width: 70%;"></el-input>
  		          <el-button icon="el-icon-tickets" v-clipboard:copy='selectTable.uploadLegalDomain' v-clipboard:success='clipboardSuccess'>复制</el-button>
  		        </el-form-item>
          	</el-col>
          	<el-col>
  		        <el-form-item label-width="180px" label="DownloadFile合法域名" prop="downloadLegalDomain" :rules ="[rule[0]]">
  		          <el-input placeholder="请输入" v-model="selectTable.downloadLegalDomain" maxLength="100" style="width: 70%;"></el-input>
  		          <el-button icon="el-icon-tickets" v-clipboard:copy='selectTable.downloadLegalDomain' v-clipboard:success='clipboardSuccess'>复制</el-button>
  		        </el-form-item>
          	</el-col>
          </el-row>
        </div>
        
				<el-row>
        	<el-col :span="24">
		        <el-form-item label="审核模式" prop="auditMode" :rules ="[rule[0]]">
		          <el-switch
		            v-model="selectTable.auditMode"
		            :active-value="0"
		            active-text="运营模式"
		            :inactive-value="1"
		            inactive-text="审核模式"
		            >
		          </el-switch>
		        </el-form-item>
        	</el-col>
        </el-row>
        <template v-if="selectTable.auditMode">
	        <el-row>
	        	<el-col>
			        <el-form-item label="小程序标题" prop="appletNameConfigre" :rules="[rule[0]]">
			          <el-input placeholder="请输入" v-model="selectTable.appletNameConfigre" maxLength="100"></el-input>
			        </el-form-item>
	        	</el-col>
	        </el-row>
					<el-row>
	        	<el-col>
			        <el-form-item label="Logo" prop="headUrlConfigure" :rules ="[rule[0]]">
			          <singleImage v-model="selectTable.headUrlConfigure"></singleImage>
			        </el-form-item>
	        	</el-col>
	        </el-row>
	        
	        <el-row>
	        	<el-col>
			        <el-form-item label="简介" prop="brief" :rules="[rule[0]]">
			          <el-input type="textarea" placeholder="请输入" v-model="selectTable.brief" maxLength="100"></el-input>
			        </el-form-item>
	        	</el-col>
	        </el-row>
	        
	        <el-row>
	        	<el-col>
			        <el-form-item label="联系方式" prop="phone" :rules="[rule[0]]">
			          <el-input placeholder="请输入" v-model="selectTable.phone" maxLength="100"></el-input>
			        </el-form-item>
	        	</el-col>
	        </el-row>   
					<el-row>
	        	<el-col>
			        <el-form-item label="公司形象" prop="particulars" :rules ="[rule[0]]">
			          <singleImage v-model="selectTable.particulars"></singleImage>
			        </el-form-item>
	        	</el-col>
	        </el-row>
					<el-row>
	        	<el-col>
			        <el-form-item label="企业展示" prop="photoUrl" :rules ="[rule[0]]">
			          <singleImage v-model="selectTable.photoUrl"></singleImage>
			        </el-form-item>
	        	</el-col>
	       	</el-row>
       	</template>
      </el-form>
      <div slot="footer" class="dialog-footer" v-loading="pload">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {wechatGetById,wechatSave,wechatModify} from '@/utils/weApi'
import singleImage from '@/components/Upload/singleImage'
import clip from '@/utils/clipboard' // use clipboard directly
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
export default {
	directives: {
    clipboard
  },
  components: {
  	editor : () => import('@/components/Ueditor'),
  	singleImage
  },
  props: {
    id: Number
  },
  computed: {
    title () {
      if (this.id) {
        return '修改';
      }
      else {
        return '添加';
      }
    }
  },
  data () {
    return {
      pload: false,
      rule: [
        { required: true, message: '必填项', trigger: 'change' }
      ],
      show: true,
      selectTable: {}
    }
  },
  created () {
    if (this.id) {
      this.getData()
    } else {
      this.pload = false
    }
  },
  watch: {
    show (newVal) {
      this.$parent.edit = false;
    }
  },
  methods: {
    clipboardSuccess() {
      this.$message({
        message: '复制成功',
        type: 'success',
        duration: 1500
      })
    },
    async submitForm(formName) {
      await this.$refs[formName].validate();
      try {
        this.pload = true
        if (this.id) {
          await wechatModify(this.selectTable)
        } else {
          await wechatSave(this.selectTable)
        }
        this.$notify({title: '操作成功', type: 'success', duration: 5000})
        this.$parent.edit = false
        this.$emit('getData')
      } catch(e) {
        this.pload = false
      }
    },
    async getData(){
  		this.pload = false
      const Datas = await wechatGetById({
        appletId: this.id
      })
      this.selectTable = Datas
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .box {
    border: 1px #ccc dashed;
    border-radius:10px;
    padding: 30px 20px 10px 20px;
    margin: 30px 0;
    position: relative;
    .hr {
      background: #fff;
      padding: 0 10px;
      position: absolute;
      top: 0;
      transform: translateY(-50%);
      color: #97a8be;
      font-size: 12px;
    }
  }
</style>